<template>
    <div class="page-child-main consumption3">
        <a-spin :class="loading&&'null-spin'" tip="Loading..." :spinning="loading">
            <div></div>
        </a-spin>
        <div>
            <div class="btn-box">
                <div class="top-btn" :class="pageType==='offline'&&'btn-active'" @click="typeChange('offline')">线下门店</div>
                <div class="top-btn" :class="pageType==='online'&&'btn-active'" @click="typeChange('online')">健康咨询</div>
                <div class="top-btn" :class="pageType==='goods'&&'btn-active'" @click="typeChange('goods')">线上商城</div>
            </div>
        </div>
        <div class="chart-box">
            <div class="chart-list">
                <div class="chart-parent">
                    <div class="chart-main" id="consumptionChart3"></div>
                    <img class="chart-img" src="@/assets/img/today.png" />
                </div>

                <div>
                    <span class="chart-words">{{getNum(todayNum)}}</span>
                    <span class="chart-unit">(元)</span>
                </div>
                <div class="chart-title">今日消费金额</div>
            </div>

            <div class="chart-list">
                <div class="chart-parent">
                    <div class="chart-main" id="consumptionChart4"></div>
                    <img class="chart-img" src="@/assets/img/month.png" />
                </div>
                <div>
                    <span class="chart-words">{{getNum(monthNum)}}</span>
                    <span class="chart-unit">(元)</span>
                </div>
                <div class="chart-title">当月消费金额</div>
            </div>
            <div class="chart-list">
                <div class="chart-parent">
                    <div class="chart-main" id="consumptionChart5"></div>
                    <img class="chart-img" src="@/assets/img/total.png" />
                </div>
                <div>
                    <span class="chart-words">{{getNum(totalNum)}}</span>
                    <span class="chart-unit">(元)</span>
                </div>
                <div class="chart-title">累计消费金额</div>
            </div>
        </div>

    </div>
</template>
<script lang="ts">
import api from "@/api/api";
import { echartLoad, toDecimalNoZero, toYuan } from "@/utils";
import { Component, Vue } from "vue-property-decorator";
@Component({
    name: "tpl",
    components: {},
})
export default class extends Vue {
    loading = false;
    pageType = "offline";
    chart1: any = null;
    chart2: any = null;
    chart3: any = null;
    todayNum = 0;
    todayData = [
        {
            value: 90,
            name: "Perfect",
            itemStyle: {
                color: "rgba(68, 105, 241, 1)",
            },
        },
    ];
    monthNum = 0;
    monthData = [
        {
            value: 80,
            name: "Perfect",
            itemStyle: {
                color: "rgba(17, 227, 50, 1)",
            },
        },
    ];
    totalNum = 0;
    totalData = [
        {
            value: 70,
            name: "Perfect",
            itemStyle: {
                color: "rgba(246, 105, 68, 1)",
            },
        },
    ];
    async mounted() {
        await this.getData();
        echartLoad(() => {
            this.setChart();
        });
    }
    async getData() {
        this.loading = true;
        try {
            const res = await api.getConsumptionByType(this.pageType);
            this.todayNum = toYuan(res.data.todayConsumption);
            this.monthNum = toYuan(res.data.monthConsumption);
            this.totalNum = toYuan(res.data.totalConsumption);
        } finally {
            this.loading = false;
        }
    }
    typeChange(type) {
        this.pageType = type;
        this.getData();
    }
    getNum(num) {
        const str = Number(num).toLocaleString();
        return str;
    }
    timer: any = null;
    beforeDestroy() {
        this.timer && clearInterval(this.timer);
    }
    chartAnimation() {
        if (!this.chart1) return;
        this.chart1.dispose();
        this.chart2.dispose();
        this.chart3.dispose();
        this.initChart();
    }
    setChart() {
        if (this.chart1) {
            this.resetChart();
        } else {
            this.initChart();
            // 启动定时器（每 2 秒切换一次）
            this.timer = setInterval(this.chartAnimation, 10000);

            // 鼠标悬停时暂停自动切换
            this.chart1.on("mouseover", () => clearInterval(this.timer));
            this.chart1.on("mouseout", () => {
                this.timer = setInterval(this.chartAnimation, 10000);
            });

            this.chart2.on("mouseover", () => clearInterval(this.timer));
            this.chart2.on("mouseout", () => {
                this.timer = setInterval(this.chartAnimation, 10000);
            });

            this.chart3.on("mouseover", () => clearInterval(this.timer));
            this.chart3.on("mouseout", () => {
                this.timer = setInterval(this.chartAnimation, 10000);
            });
        }
    }

    resetChart() {
        const options1 = this.chart1.getOption();
        options1.series = this.getSeries("today");
        this.chart1.setOption(options1, true);

        const options2 = this.chart2.getOption();
        options2.series = this.getSeries("month");
        this.chart2.setOption(options2, true);

        const options3 = this.chart3.getOption();
        options3.series = this.getSeries("total");
        this.chart3.setOption(options3, true);
    }
    initChart() {
        const chartDom1 = document.getElementById("consumptionChart3");
        const chartDom2 = document.getElementById("consumptionChart4");
        const chartDom3 = document.getElementById("consumptionChart5");
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        const options1: any = {
            series: this.getSeries("today"),
        };
        const options2: any = {
            series: this.getSeries("month"),
        };
        const options3: any = {
            series: this.getSeries("total"),
        };
        if (chartDom1) {
            this.chart1 = window.echarts.init(chartDom1 as HTMLDivElement);
            this.chart1.setOption(options1);
            this.chart2 = window.echarts.init(chartDom2 as HTMLDivElement);
            this.chart2.setOption(options2);
            this.chart3 = window.echarts.init(chartDom3 as HTMLDivElement);
            this.chart3.setOption(options3);
        }
    }

    getSeries(type) {
        let data = {};
        if (type === "today") data = this.todayData;
        if (type === "month") data = this.monthData;
        if (type === "total") data = this.totalData;
        return [
            {
                type: "gauge",
                startAngle: 90,
                endAngle: -270,
                pointer: {
                    show: false,
                },
                progress: {
                    show: true,
                    overlap: false,
                    roundCap: true,
                    clip: false,
                },
                axisLine: {
                    lineStyle: {
                        width: 10,
                    },
                },
                splitLine: {
                    show: false,
                    distance: 0,
                    length: 10,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                    distance: 50,
                },
                data: data,
                title: {
                    show: false,
                },
                detail: {
                    show: false,
                },
            },
        ];
    }
}
</script>
<style lang="scss">
.consumption3 {
    width: 49%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .chart-box {
        flex-grow: 1;
        height: 50%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .chart-list {
        width: 33%;
        text-align: center;
    }
    .chart-parent {
        height: 180px;
        position: relative;
    }
    .chart-main {
        height: 100%;
        width: 100%;
    }
    .chart-img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 80px;
        height: 80px;
        margin: auto;
    }
    .chart-words {
        font-weight: bold;
        font-size: 18px;
        color: #222222;
    }
    .chart-unit {
        font-size: 14px;
        margin-left: 5px;
        color: #6d6d6d;
    }
    .chart-title {
        font-size: 14px;
        color: #6d6d6d;
    }
    .btn-box {
        background: #f6fbff;
        border-radius: 20px;
        border: 1px solid #e8e8e8;
        height: 40px;
        display: inline-block;
    }

    .top-btn {
        display: inline-block;
        width: 120px;
        text-align: center;
        font-size: 14px;
        height: 100%;
        line-height: 38px;
        border-radius: 40px;
        cursor: pointer;
    }
    .top-btn:hover {
        background-color: rgba(68, 105, 241, 0.1);
    }
    .btn-active {
        background-color: rgba(68, 105, 241, 1);
        color: #fff;
    }
    .btn-active:hover {
        background-color: rgba(68, 105, 241, 1);
    }
}
</style>
